import React, { Component } from 'react';
import { connect } from 'react-redux'  
import moment from 'moment'
import { Modal, Form, Input,Select ,Table,Button,Row,Col,} from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

class ViewPatrolResultModal extends Component {
  constructor(props) {
    super(props);
  }
 
  render() {
    const { children, dispatch,detailList,patrolId,item,assetCurrentSize,assetCurrent,assetTotal } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 16 },
    }; 
   
    const paginationDetail = {
        current:assetCurrent,
        pageSize:assetCurrentSize,
        total: assetTotal,
        showSizeChanger: true,
        showTotal: (total => '共' + assetTotal + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'patrol/getPatrolResultList',
                payload: {...{'pageNum':current, 'pageSize':size,'patrolId':patrolId }},
            });
        },
        onChange(current) {
            dispatch({ 
                type: 'patrol/getPatrolResultList', 
                payload: { ...{'pageNum':current, 'pageSize':assetCurrentSize,'patrolId':patrolId }},
            });
        },
    };


    const columns = [{
        title: '资产编号',
        dataIndex: 'asset_no',
        key: 'asset_no',
        width: 200
      },{
        title: 'RFID编码',
        dataIndex: 'rfid_no',
        key: 'rfid_no',
        width: 200,
      },{
        title: '设备序列号',
        dataIndex: 'serial_no',
        key: 'serial_no',
        width: 200,
      },{
        title: '所在位置',
        dataIndex: 'pos',
        key: 'pos',
        width: 200,
      },{
        title: '故障描述',
        dataIndex: 'remark_',
        key: 'remark_',
        width: 200,
      }];  
   
    return (
      <span>
        <Modal           
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                width={1000}
                visible={this.props.visible}
                footer={[
                  <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
                ]}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{width:'auto',backgroundColor:'#fff'}}>
            <div style={{minHeight:'100%'}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px',paddingRight:'20px'}}>
                <Form style={{height:'80px'}}>                   
                     <Row>                      
                      <Col span={6}>
                        <FormItem
                            {...formItemLayout}
                              label="巡检名称"
                            >
                            {getFieldDecorator('name', {
                                initialValue: item.name,                  
                              })(<Input readOnly="readonly" />)}
                        </FormItem> 
                      </Col>
                      <Col span={6}>
                        <FormItem
                            {...formItemLayout}
                              label="巡检类型"
                            >
                            {getFieldDecorator('type', {
                                initialValue: item.type=="1"?'定时巡检': item.type=="2"?'单次巡检': item.type=="3"?'临时巡检':'',                    
                              })(<Input readOnly="readonly" />)}
                        </FormItem> 
                      </Col>
                      <Col span={6}>
                        <FormItem
                            {...formItemLayout}
                              label="巡检日期"
                            >
                            {getFieldDecorator('inspectDate', {
                                initialValue: item.inspectDate?new moment(item.inspectDate).format("YYYY-MM-DD"):'',                  
                              })(<Input readOnly="readonly" />)}
                        </FormItem> 
                      </Col>                     

                       <Col span={6}>
                         <FormItem
                            {...formItemLayout}
                              label="责任人"
                              hasFeedback
                            >
                           {getFieldDecorator('operatiorName', {
                                initialValue: item.operatiorName,                       
                              })(<Input readOnly="readonly" />)}
                        </FormItem>                    
                      </Col>
                     
                    </Row>   
                    <Row>
                     <Col span={24}>
                     <hr style={{width:'926px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                     </Col>
                   </Row>

                </Form>    
            </div>          

              <div style={{ }}>
                <div style={{width:'100%',padding: "10px 20px 20px" }}>
                      <Table columns={columns}
                          rowKey={record => record.asset_no}                  
                          dataSource={detailList} 
                          pagination={paginationDetail} 
                          scroll={{ }}
                    />
                </div>
              </div>
          </div>          
        </div>
        </Modal>
        
      </span>
    );
  }
    
}

export default Form.create()(ViewPatrolResultModal)
